<template>
  <div>
    <h3>Tag标签</h3>
    <!-- disable-transitions移除时隐藏渐变动画-->
    <el-tag v-for="tag in tags" :key="tag.name" :type="tag.type" closable @close="handleClose(tag)"
      :disable-transitions="true">{{tag.name}}</el-tag>
    <el-input v-model="inputval" v-if="inputVisible" ref="saveTag" :autofocus="true" @blur="createTag"></el-input>
    <button v-else @click="showInput">+ new tag</button>
    <!-- status 类型
    status="success"
    :text-inside="true" 置于内部
    :percentage="10"
    type="dashboard" 进度条形状（仪表盘形）-->
    <el-progress
    :percentage="prec"
    status="exception"
    :format="format"
    stroke-width="26"
    :text-inside="true"
    :color="progressColorChange"
    ></el-progress>


    <el-progress
    :percentage="prec"
    status="exception"
    :format="format"
    stroke-width="15"
    :text-inside="true"
    :color="progressColorArray"
    type="circle"></el-progress>

    <div>
      <el-button-group>
        <el-button @click="increase">+</el-button>
        <el-button @click="decrease">-</el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        progressColorArray:[
          {color:'red',percentage:10},
          {color:'pink',percentage:20},
          {color:'blue',percentage:30},
          {color:'yellow',percentage:40},
          {color:'hotpink',percentage:50},
          {color:'green',percentage:60},
          {color:'purple',percentage:70},
          {color:'brown',percentage:80},
          {color:'orange',percentage:90},
          {color:'black',percentage:100},

        ],
        prec: 10,
        inputVisible: false,
        inputval: '',
        tags: [{
          name: '标签一',
          type: 'success'
        }, {
          name: '标签二',
          type: 'danger'
        }, {
          name: '标签三',
          type: 'info'
        }, {
          name: '标签四',
          type: 'warning'
        }]
      }
    },
    components: {

    },
    methods: {

      progressColorChange(prec) {
        if (prec < 30) {
          return '#909399';

        } else if (prec > 70) {
          return 'pink';
        } else {
          return '#67c23a';
        }
      },
      increase() {
        //进度条的值每次加10
        this.prec += 10;
        if (this.prec == 100) {
          this.prec = 100;
        }
      },
      decrease() {
        //进度条的值每次减10
        this.prec -= 10;
        if (this.prec == 0) {
          this.prec = 0;
        }
      },
      format(value) {
        return value === 100 ? '满' : `${value}%`;
      },
      createTag() {
        //获得输入框内容
        let inputVal = this.inputval;
        console.log(inputVal);
        //将内容存放到数组中
        this.tags.push({
          name: inputVal,
          type: 'success'
        });
        //隐藏输入框
        this.inputVisible = false;
        //清空输入框的内容
        this.inputval = '';
      },
      showInput() {
        //输入框显示
        this.inputVisible = true;
        //dom元素渲染之后自动获得焦点
        /* this.$nextTick(()=>{
           this.$refs.saveTag.$refs.input.focus();
         }) */

      },
      handleClose(tag) {
        //splice(删除元素的下标,删除元素的个数)
        this.tags.splice(this.tags.indexOf(tag), 1);
      }
    }
  }
</script>

<style>
</style>
